<template>
	<view class="l-body">
		<view class="b-box">
			<view class="b-box-title">
				<view class="b-box-title-header">
					{{item.CreateUser_Name}}提交的出差
				</view>
				<view class="b-box-title-status">
					<text>状态：</text>{{item.FlowStatus_Name}}
				</view>
			</view>
		</view>
		<view class="pass" v-show="_retStatusVal(item.FlowStatus,0)">
			已完成
		</view>
		<view class="refuse" v-show="_retStatusVal(item.FlowStatus,3)">
			已拒绝
		</view>
		<view class="b-body">
			<view class="b-body-row">
				审批ID
				<view class="b-body-val">
					{{item.ID}}
				</view>
			</view>
			<view class="b-body-row">
				所在部门
				<view class="b-body-val">
					{{item.OrgID_Name}}
				</view>
			</view>
			<view class="b-body-row">
				出差事由
				<view class="b-body-val" v-html="_retDecode(item.Reason)"></view>
			</view>
			<view class="b-body-row">
				交通工具
				<view class="b-body-val">
					{{item.TransportType_Name}}
				</view>
			</view>
			<view class="b-body-row">
				目的城市
				<view class="b-body-val">
					{{item.Destination}}
				</view>
			</view>
			<view class="b-body-row">
				开始时间
				<view class="b-body-val">
					{{_retFormatYmdt(item.Startdate)}}
				</view>
			</view>
			<view class="b-body-row">
				结束时间
				<view class="b-body-val">
					{{_retFormatYmdt(item.Enddate)}}
				</view>
			</view>
			<view class="b-body-date">
				预计花费
				<view class="b-body-val">
					{{item.TotalCost}} 元
				</view>
				<view class="b-body-times">
					<view class="b-body-times-row">
						<view class="b-body-time">
							餐费 <text>{{item.Food}}</text> 元
						</view>
						<view class="b-body-time">
							住宿费 <text>{{item.Hotel}}</text> 元
						</view>
					</view>
					<view class="b-body-times-row">
						<view class="b-body-time">
							交通费 <text>{{item.Carfare}}</text> 元
						</view>
						<view class="b-body-time">
							其他费用 <text>{{item.OtherFee}}</text> 元
						</view>
					</view>
				</view>
			</view>
			<view class="b-body-row">
				费用说明
				<view class="b-body-val">
					{{_retDecode(item.FeeNote)}}
				</view>
			</view>
		</view>
		<view class="b-body">
			<view class="b-body-row">
				流程
				<block v-for="(_item,index) in flows" :key="index">
					<view class="row-flow">
						<view class="row-flow-circ">{{_retSlgName(item.CreateUser_Name)}}
							<view :class="[_item.ActionID=='不同意'?'row-flow-refuse':'row-flow-focus']"></view>
						</view>
						<view v-show="index!=0" class="row-flow-line"></view>
						<view class="row-flow-status">
							{{_item.Status}}
						</view>
						<view class="row-flow-actionid">
							{{_item.ActionID?_item.ActionID:"完成"}}
							{{_item.ProcessNote}}
						</view>
						<view class="row-flow-createdt">
							{{_retCustFormatTime(_item.CreateTime)}}
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="b-body" v-show="actions.length>0">
			<view class="b-body-row">
				审批
			</view>
			<view class="b-body-actions">
				<view class="actions-btns-list">
					<block v-for="(item, index) in actions" :key="index">
						<view class="list-btn">
							<button @click="onGetFocus(item.ID,index)" :class="[index==btn_active?'focus-btn':'']" size="mini">{{item.Name}}</button>
						</view>
					</block>
				</view>
				<view class="actions-row-note">
					<editor placeholder="请填写审批意见" id="l_note" @input="onNoteChange"></editor>
				</view>
			</view>
		</view>
		<view class="b-body-btns" v-show="actions.length>0">
			<view class="btn">
				<button type="primary" size="mini" @click="onSendTravelData()">确定</button>
			</view>
			<view class="btn">
				<button type="default" size="mini" @click="onGoBack()">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				item: [],
				flows: [],
				actions: [],
				Note: "",
				btn_id: 0,
				btn_active: 0
			}
		},
		onLoad: function(options) {
			// 获取传入id值
			let ID = options.id;
			// 加载出差历史
			this.getTraveInfo(ID);
		},
		methods: {
			onGoBack(e) {
				uni.navigateBack({
					delta: 1
				})
			},
			onGetFocus(ID, idx) {
				this.btn_id = ID;
				this.btn_active = idx;
			},
			onNoteChange(e) {
				this.Note = e.detail.text;
			},
			_retSlgName(v) {
				return (v) ? v.substr(0, 1) : "";
			},
			_retFormatYmdt(v) {
				return v ? this.retFormatYmdt(v) : "";
			},
			_retStatusVal(v, t) {
				let _tmp_arr_refuse = [644, 645, 646];
				let _tmp_arr_status = JSON.parse(uni.getStorageSync("travel_status"));
				switch (t) {
					case 0: //完成
						return v == _tmp_arr_status[1].id ? true : false;
						break;
					case 1: //撤销
						return v == _tmp_arr_status[2].id ? true : false;
						break;
					case 3: //拒绝
						return (v == _tmp_arr_refuse[0] || v == _tmp_arr_refuse[1] || v == _tmp_arr_refuse[2]) ? true : false;
						break;
				}
			},
			onSendTravelData() {
				// console.log(ID, this.item.ID, this.TerminateTime, this.item.FlowStatus, this.Note)
				// 请求流程数据
				let apiData = {
					url: pageApp.globalData.url + "/WorkflowProcess",
					data: {
						"ActionID": this.btn_id,
						"ProcessNote": this.Note,
						"BusinessID": this.item.ID,
						"FlowStatus": this.item.FlowStatus,
						"BusinessCode": "Travel"
					},
					method: "POST",
					success: (d) => {
						if (d.data.code == "001") {
							uni.showToast({
								title: "审批成功!"
							})
							setTimeout(() => {
								uni.navigateBack({})
							}, 1000)
						} else {
							uni.showToast({
								icon: "none",
								title: d.data.msg
							})
						}
					}
				}
				// 发送数据
				this.vjAjaxData(apiData);
			},
			onDateTimeChange(value) {
				this.TerminateTime = value;
			},
			onSelTerminatePicker() {
				this.$refs['date-time'].show();
			},
			_retFormatDate(v) {
				if (v) {
					return v.substr(0, v.length - 3)
				}
				return v;
			},
			_retDecode(v) {
				return this.Base64.decode(v);
			},
			_retCustFormatTime(dt){
				return this.retCustFormatTime(dt);
			},
			getTraveInfo(ID) {
				// 准备数据
				let apiData = {
					url: pageApp.globalData.url + "/TravelInfo",
					data: {
						"ID": ID
					},
					success: (d) => {
						// console.log("数据", d)
						if (d.data.code == "001") {
							this.item = d.data.data;
							// 请求流程数据
							let api_data = {
								url: pageApp.globalData.url + "/WorkflowProcessInfo",
								data: {
									"BusinessCode": "Travel",
									"BusinessID": this.item.ID,
									"FlowStatus": this.item.FlowStatus
								},
								success: (d) => {
									// console.log("数据", d, d.data.data.flows);
									if (d.data.code == "001") {
										this.flows = d.data.data.flows;
										this.actions = d.data.data.actions;
									}
								}
							}
							// 发送数据
							this.vjAjaxData(api_data);
						}
					}
				}
				// 发送数据
				this.vjAjaxData(apiData);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.l-body {
		position: relative;
		padding-bottom: 90rpx;
	}

	.ql-container {
		height: 100rpx;
		min-height: 100rpx;
	}

	.l-body .pass {
		border: solid 6rpx #a7e3cf;
		position: absolute;
		right: 40rpx;
		top: 80rpx;
		width: 140rpx;
		height: 140rpx;
		text-align: center;
		line-height: 140rpx;
		border-radius: 50%;
		color: #a7e3cf;
		font-weight: 700;
		transform: rotateZ(-30deg);
	}

	.l-body .refuse {
		border: solid 6rpx #f2bbb7;
		position: absolute;
		right: 40rpx;
		top: 80rpx;
		width: 140rpx;
		height: 140rpx;
		text-align: center;
		line-height: 140rpx;
		border-radius: 50%;
		color: #f2bbb7;
		font-weight: 700;
		transform: rotateZ(-30deg);
	}

	.b-box {
		background-color: #ffffff;
		margin-bottom: 20rpx;
		padding: 20rpx 30rpx;
	}

	.b-box-title-header {
		font-size: 34rpx;
		color: #000000;
		font-weight: 700;
	}

	.b-box-title-status {
		font-size: 30rpx;
		color: #E1B176
	}

	.b-box-title-status text {
		color: #707070
	}

	.b-body {
		border-radius: 16rpx;
		background-color: #ffffff;
		margin: 20rpx;
		padding: 20rpx 30rpx;
		font-size: 30rpx;
	}

	.b-body-row {
		margin-bottom: 30rpx;
	}

	.b-body-date {
		background-color: #F1F8FF;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		margin: 30rpx 0;
	}

	.b-body-val {
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
	}

	.b-body-times {
		position: relative;
		margin-top: 20rpx;
		height: 100rpx;
	}

	.b-body-times-row {
		display: flex;
		justify-content: space-around;
	}

	.b-body-times .b-body-circ {
		width: 12rpx;
		height: 12rpx;
		border: solid 4rpx #707070;
		border-radius: 50%;
		position: absolute;
		left: -8rpx;
	}

	.b-body-times .top {
		top: 20rpx
	}

	.b-body-times .bot {
		bottom: 20rpx
	}

	.b-body-times .b-body-line {
		border-left: solid 4rpx #707070;
		height: 24rpx;
		top: 40rpx;
		left: 0;
		position: absolute;
	}

	.b-body-time {
		font-size: 28rpx;
		text-align: left;
		width: 50%;
	}

	.b-body-time text {
		font-weight: 700;
		padding: 0 10rpx;
	}

	.row-flow {
		position: relative;
		padding: 0 70rpx;
		line-height: 36rpx;
		margin: 30rpx 0 50rpx 0;
	}

	.row-flow:last-child {
		position: relative;
		padding: 0 70rpx;
		line-height: 36rpx;
		margin: 30rpx 0 20rpx 0;
	}

	.row-flow-circ {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border: solid 4rpx #4497e1;
		border-radius: 10rpx;
		position: absolute;
		background-color: #4497e1;
		color: #ffffff;
		top: 8rpx;
		left: 0;
	}

	.row-flow-focus {
		background-color: #1cb984;
		width: 24rpx;
		height: 24rpx;
		border: solid 4rpx #ffffff;
		border-radius: 50%;
		position: absolute;
		right: -6rpx;
		bottom: -6rpx;
	}

	.row-flow-focus::after {
		content: "";
		position: absolute;
		left: 4rpx;
		top: 6rpx;
		width: 50%;
		height: 25%;
		border: 2px solid #fff;
		border-radius: 1px;
		border-top: none;
		border-right: none;
		background: transparent;
		transform: rotate(-45deg);
	}

	.row-flow-refuse {
		background-color: #f2bbb7;
		width: 24rpx;
		height: 24rpx;
		border: solid 4rpx #ffffff;
		border-radius: 50%;
		position: absolute;
		right: -6rpx;
		bottom: -6rpx;
	}

	.row-flow-refuse::after {
		content: "";
		position: absolute;
		left: 2rpx;
		top: 4rpx;
		width: 80%;
		height: 25%;
		border: 2px solid #fff;
		border-radius: 1px;
		border-left: none;
		border-top: none;
		border-right: none;
		background: transparent;
	}


	.row-flow-line {
		border-left: solid 8rpx #E5E5E5;
		height: 52rpx;
		top: -50rpx;
		left: 25rpx;
		position: absolute;
	}

	.row-flow-status {
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
	}

	.row-flow-actionid {
		font-size: 28rpx;
	}
	
	.row-flow-createdt{
		position: absolute;
		right:0;
		top:10rpx;
		font-size: 26rpx;
	}
	
	.b-body-actions {
		margin: 30rpx 0;
	}
	
	.actions-btns-list {
		display: flex;
	}
	
	.actions-btns-list .list-btn {
		margin-right: 20rpx;
	}
	
	.actions-btns-list .list-btn .focus-btn {
		background-color: #a7e3cf;
		border: none;
	}

	.actions-row-note {
		font-size: 28rpx;
		margin-top: 20rpx;
		border: solid 2rpx #EEEEEE;
		padding: 8rpx 14rpx;
		border-radius: 16rpx;
	}

	.row-terminate-time {
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
	}

	.b-body-btns {
		position: fixed;
		justify-content: flex-end;
		width: 100%;
		z-index: 99;
		left: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
	}

	.b-body-btns .btn {
		margin: 18rpx 20rpx 18rpx 0;
	}
</style>
